<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style type="text/css">
    input#chat {
        width: 410px
    }
    #console-container {
        width: 400px;
    }

    #console {
        border: 1px solid #CCCCCC;
        border-right-color: #999999;
        border-bottom-color: #999999;
        height: 170px;
        overflow-y: scroll;
        padding: 5px;
        width: 100%;
    }

    #console p {
        padding: 0;
        margin: 0;
    }
</style>
<body>
<div>
    <p>
        <table>
            <tr>
                <td>登录人id：<span class="text" id="accountId" th:text="${accountId}"></span></td>
            </tr>
            <tr>
                <td>登录人名称：<span class="text" id="userName" th:text="${userName}"></span></td>
            </tr>
        </table>
        <button onclick="aa()">测试</button>
        <input type="text" placeholder="type and press enter to chat" id="chat" />
    </p>

    <div class="col-lg-4 col-md-6 col-sm-6 col-xs-12" id="loginPersonIdHide">
        <label class="control-label label-required" for="loginPersonId">登录人信息</label>
        <div class="form-content">
            <select class="form-control cc" id="loginPersonId" type="text" title="请选择" data-live-search="true">
            </select>
        </div>
    </div>

    <div id="console-container">
        <div id="console"></div>
    </div>
    <script type="text/javascript" src="/js/jquery.min.js"></script>
    <script type="text/javascript">
        var accountId = $("#accountId").text();
        var userName = $("#userName").text();
        var senderId = accountId;

        console.log("用户id------"+accountId);
        console.log("用户名------"+userName);

        var sAccountId = "";
        var Console = {};
        var mess={};
        var userList=[];
        //var senderId=prompt("请输入你的账号");
        Console.log = (function(message) {
            console.log(mess);
            var consoles = document.getElementById('console');
            var p = document.createElement('p');
            p.style.wordWrap = 'break-word';
            p.innerHTML = message;
            consoles.appendChild(p);
            while (consoles.childNodes.length > 25) {
                consoles.removeChild(consoles.firstChild);
            }
            consoles.scrollTop = consoles.scrollHeight;
        });
        var Chat = {};
        Chat.socket = null;
        Chat.connect = (function(host) {
            if ('WebSocket' in window) {
                Chat.socket = new WebSocket(host);
            } else if ('MozWebSocket' in window) {
                Chat.socket = new MozWebSocket(host);
            } else {
                Console.log('错误');
                return;
            }
            Chat.socket.onopen = function() {
                Console.log('打开连接');
                document.getElementById('chat').onkeydown = function(event) {
                    if (event.keyCode == 13) {
                        sAccountId = Chat.sendMessage();
                        console.log(sAccountId);
                    }
                };
            };
            Chat.socket.onclose = function() {
                document.getElementById('chat').onkeydown = null;
                Console.log('关闭.');
            };
            Chat.socket.onmessage = function(message) {
                var c = "";
                if(message.data.indexOf("----------") != -1) {
                    var a = message.data.lastIndexOf("----------");
                    var c = message.data.substring(a+10,message.data.length);
                }
                console.log(message);
                Console.log(c);
                Console.log(message.data.substring(0,message.data.lastIndexOf("----------")));
            };
        });
        Chat.initialize = function() {
            Chat.connect('ws://localhost:8081/webSocket/'+senderId+'/'+userName);
        };
        Chat.sendMessage = (function() {

            var message = document.getElementById('chat').value;
            console.log("message======"+message);

            var loginPersonId = $('#loginPersonId').val();

            var name= $(".cc").find("option:selected").text();
            console.log(name);

            console.log("loginPersonId======"+loginPersonId);

            //var receiverIds=prompt("请输入接收者账号用逗号分隔");
            var receiverIds = loginPersonId;
            console.log("receiverIds======"+receiverIds);

            userList=receiverIds.split(",");
            mess.userList=userList;



            mess.mess = message+"----------" + userName;
            var strmee = JSON.stringify(mess)
            console.log("strmee======"+strmee);

            if (message != '') {
                //发送
                Chat.socket.send(strmee);
                //清空输入框
                document.getElementById('chat').value='';
            }
            return loginPersonId;
        });
        Chat.initialize();


        function aa(){
            //客户列表下拉框
            $.ajax({
                type: 'POST',
                dataType: "json",
                // url: '/webSocket/'+senderId+'/'+userName+'/selectLoginPerson',
                url: '/webSocket/selectLoginPerson',
                cache : false,
                data:{
                },
                async : false,
                success: (function (data) {
                    if (data.code == "000000") {
                        // 客户列表不为空时，显示客户列表内容
                        var html = '';
                        for(var key in data.data)
                            if(accountId != key ) {
                                html += "<option value=" + key + ">" +  data.data[key] + "</option>";
                            }

                        }
                    $("#loginPersonId").html(html);
                }),
                error: (function (res) {
                    alert("请求失败1");
                })
            });
        }
    </script>
</div>
</body>
</html>